<template>
  <div >
    <div>
      <div class="font15 mt10 pl10">
      <span class="titletext ">{{titledata.title}}</span>
      <div class="graytext  mt10 font13">
        <span >工单编号：</span>
        <span class="titletext">{{titledata.pmInsId}}</span>
      </div>
    </div>
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">项目信息</span>
    </div>
    <!-- 基本信息 -->
      <van-field readonly required name="projectName" :value="fromdata.projectName" label="项目名称：" label-width="5em" autosize rows="1" type="textarea"/>
      <van-field readonly required name="projectID" :value="fromdata.projectID" label="项目编码：" label-width="5em" />
      <van-field readonly required name="businessId" :value="fromdata.businessId" label="商机编号：" label-width="5em" />
      <van-field readonly required name="businessName" :value="fromdata.businessName" label="商机名称：" label-width="5em" autosize rows="1" type="textarea"/>
      <van-field readonly required name="city" :value="fromdata.city" label="地市：" label-width="3em" />
      <van-field readonly required name="counties" :value="fromdata.counties" label="县区：" label-width="3em" />
      <van-field readonly name="isFinalTest" :value="fromdata.isFinalTest" label="项目是否终验：" label-width="7em" />
      <van-field readonly name="actualDeliveryTime" :value="fromdata.actualDeliveryTime" label="终验时间：" label-width="5em" />
      <van-field readonly required name="contractPartType" :value="fromdata.contractPartType" label="是否含有CT：" label-width="6.5em" />
      <van-field readonly required label-width="12em" label="前向合同扫描件：" />
      <div v-for="(fileitem) in fromdata.oldContractDocument" :key="fileitem.id" style="margin-left:20px">
        <div readonly class="font14 fileLink" style="color:#0F85CF">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
      </div>
      <van-field readonly label-width="12em" label="补充说明材料：" >
<!--        <template v-if="canUpFiles == true" #button >-->
<!--          <van-uploader name="businessJudgedAdminFile" :after-read="didFinishPickingFiles">-->
<!--            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>-->
<!--          </van-uploader>-->
<!--        </template>-->
      </van-field>
      <div v-for="(fileitem, index) in fromdata.otherFileList" :key="fileitem.id" style="margin-left:20px">
        <div readonly class="font14 fileLink" style="color:#0F85CF">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
<!--        <van-icon v-if="canUpFiles == true" name="close" color="#ea0023" size="20" @click="deleteFile('otherFileList', index)" />-->
      </div>
      <historyAndSuggs id='target' :showHistory='showHistory' :historydata='historydata' :approveList='approveList' />
    </div>
  </div>
</template>
 
<script>
import { openFileUrl } from '@/store/openFile';
import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue";
import {uploadFileCommon} from "@/api/dictapi";
import {Dialog, Notify} from "vant";
import {mapGetters} from "vuex";
export default {
  data() {
    return {
    }
  },
  props: ['titledata','businessdata','fromdata','showHistory','historydata','approveList','canUpFiles'],
  watch: {
    fromdata: {
      handler () { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        this.$emit('freshData',this.fromdata)
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    },
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
     tomsg () {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    openFileUrlfun(value) {
      this.$router.push(
          {
            name: 'fileview',
            query: {
              openFileUrl: openFileUrl(value)
            }
          }
      );
    },
    /// 本地文件选中后的回调
    didFinishPickingFiles(file, detail) {
      console.log('照片上传', detail.name, this.fromdata[detail.type]);

      let fileData = new FormData();
      fileData.append("pmInsType", 'ZC');
      fileData.append("pmInsTypePart", "1");
      fileData.append("files", file.file);

      let params = new Map();
      params.pmInsType = 'ZC';
      params.pmInsTypePart = '1';
      params.userName = this.user.userName;
      uploadFileCommon(fileData, params).then((res) => {
        if (!res.data) {
          Notify(res.message);
          return;
        }
        if (res.data.data) {
          this.showUploadFiles(res.data.data, detail.name);
        }
      });
    },
    // 上传附近后的 回显
    showUploadFiles(fileData, key) {
      if (this.fromdata[key] === null ||
          this.fromdata[key] === undefined) {
        this.fromdata[key] = [];
      }
      console.log('照片回显', key, this.fromdata[key]);
      this.fromdata[key].push(fileData.sysFiles[0]);
      this.$forceUpdate(); // 强制刷新界面
    },

    deleteFile(key, index) {
      Dialog.confirm({ title: "提示", message: "是否删除此附件？" })
          .then(() => {
            this.fromdata[key].splice(index, 1);
            this.$forceUpdate(); // 强制刷新界面
          })
          .catch(() => { });
    },
  },
  components: {
    historyAndSuggs
  },
}
</script>
 
<style>
.tables.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>